<!--
 * Description: OpenBookConfig编辑页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Chengming.Li
 * Date: 2021-3-9 17:25:41
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="160px" :model="formData" size="mini">
      <el-row>
        <!--configType-->
        <el-col :span="12">
          <el-form-item label="Config Type">
            <el-select
              v-model="formData.configType"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
            >
              <el-option :value="1" />
              <el-option :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <!--configName-->
        <el-col :span="12">
          <el-form-item label="Config Name">
            <el-input v-model="formData.configName" />
          </el-form-item>
        </el-col>
        <!--configKey-->
        <el-col :span="12">
          <el-form-item label="Config Key">
            <el-input v-model="formData.configKey" />
          </el-form-item>
        </el-col>
        <!--configValue-->
        <el-col :span="12">
          <el-form-item label="Config Value">
            <el-input v-model="formData.configValue" />
          </el-form-item>
        </el-col>

        <!--gcmFunction-->
        <el-col :span="12">
          <el-form-item label="GCM Function">
            <el-select
              v-model="formData.gcmFunction"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
              @change="changeGcmFunction(formData.gcmFunction)"
            >
              <el-option
                v-for="item in $store.getters['enums/getGcmFunctionListOnly']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--commodity-->
        <el-col :span="12">
          <el-form-item label="Commodity">
            <el-select
              v-model="formData.commodity"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in commodityList(formData.gcmFunction)"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #b4b4b4; font-size: 12px">
                  {{ item.gcmFunction }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!--isGlobal-->
        <el-col :span="12">
          <el-form-item label="配置类型">
            <el-select
              v-model="formData.isGlobal"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%; height: 100%"
            >
              <el-option label="全局" :value="true" />
              <el-option label="局部" :value="false" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>
<script>
import { costModelConfigEdit } from '@/api/model/open-book-config'
export default {
  name: 'OpenBookConfigEdit',
  props: {
    inputData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {}
    }
  },
  computed: {},
  created() {
    this.pageDataInit()
  },
  methods: {
    pageDataInit() {
      this.$store.dispatch('commodity/initCommodityCollectsLazy')
      // 将props传入的值复制给formData的值
      this.formData = this.$deepCopy(this.inputData)
    },
    changeGcmFunction() {
      this.formData.commodity = ''
    },

    commodityList(gcmFunction) {
      if (gcmFunction) {
        return this.$store.getters['commodity/getCommodityCollectsByGcmFunction'](gcmFunction)
      } else {
        return this.$store.getters['commodity/getCommodityCollects']
      }
    },
    async save() {
      try {
        this.isRequesting = true
        await costModelConfigEdit({ ...this.formData }, { msgSuccess: true, msgError: true })
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
